﻿<!DOCTYPE HTML>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<div class="card">
    <div class="card-header">
        <div class="col-xs-6">
            <h2>接口列表</h2>
        </div>
        <div class="col-xs-6">
            <div class="select col-xs-3">
                <select class="form-control" id="categoryId">
                    <option value="">请选择分类</option>
                    <option th:each="category:${categoryList}" th:value="${category.interfaceCategoryId}" th:text="${category.categoryName}"></option>
                </select>
            </div>&nbsp;
            <div class="select col-xs-3">
                <select class="form-control" id="isValid">
                    <option value="">请选择状态</option>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>&nbsp;
            <button class="btn btn-info" onclick="$('#data-table-interface').bootgrid('reload');">查询</button>
            <button class="btn btn-primary" id="addInterfaceBtn">新建</button>
        </div>
    </div>
    <table id="data-table-interface" class="table table-striped table-vmiddle">
        <thead>
        <tr>
            <th data-column-id="interfaceId" data-formatter="interfaceId" data-type="numeric">ID</th>
            <th data-column-id="interfaceName" data-formatter="interfaceName">接口名称</th>
            <th data-column-id="categoryName" data-formatter="categoryName">分类名称</th>
            <th data-column-id="isValid" data-formatter="isValid">状态</th>
            <th data-column-id="createTime" data-formatter="createTime">创建时间</th>
            <th data-column-id="interfaceDesc" data-formatter="interfaceDesc">接口描述</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</html>
<!-- Modal -->
<div class="modal fade" id="addInterfaceModel" tabindex="-1" role="dialog" aria-labelledby="addInterfaceModelLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="addInterfaceModelLabel">
                    添加接口信息
                </h4>
            </div>
            <div class="modal-body" id="addInterfaceModelContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary"
                        onclick="$('#add_interfaceParam').val(convertValueToJson('interfaceParamType'));$('#add_interface_form').submit();">
                    保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="modifyInterfaceModel" tabindex="-1" role="dialog" aria-labelledby="modifyInterfaceModelLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="modifyInterfaceModelLabel">
                    编辑接口信息
                </h4>
            </div>
            <div class="modal-body" id="modifyInterfaceModelContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary"
                        onclick="$('#update_interfaceParam').val(convertValueToJson('update_interfaceParamType'));$('#modify_interface_form').submit();">
                    保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    /*<![CDATA[*/
    $(function () {
        var grid = $("#data-table-interface").bootgrid({
            ajax: true,
            url: "/interface/queryInterfaceList",
            labels: {
                noResults: "无任何数据"
            },
            post: function () {
                /* 自定义参数 */
                var categoryId = $("#categoryId").val();
                var isValid = $("#isValid").val();
                return {
                    categoryId: categoryId,
                    isValid: isValid
                };
            },
            formatters: {
                "categoryName": function(column, row) {
                    var data = "";
                    if(row.category){
                        data = row.category.categoryName;
                    }
                    return data;
                },
                "isValid": function (column, row) {
                    var html;
                    if (row.isValid == 1) {
                        html = '<span style="color: #2196F3;">启用</span>';
                    } else {
                        html = '<span style="color: #F44336;">禁用</span>';
                    }
                    return html;
                },
                "commands": function (column, row) {
                    return '<button type="button" class="btn btn-icon command-edit waves-effect waves-circle" data-row-id="' + row.interfaceId
                        + '"><span class="zmdi zmdi-edit"></span></button> ' +
                        '<button type="button" class="btn btn-icon command-delete waves-effect waves-circle" data-row-id="' + row.interfaceId
                        + '"><span class="zmdi zmdi-delete"></span></button>';
                }
            }
        }).on("loaded.rs.jquery.bootgrid", function () {
            /* 绑定编辑和删除操作 */
            grid.find(".command-edit").on("click", function (e) {
                $("#modifyInterfaceModelContent").load("/interface/toModifyInterface?interfaceId="+$(this).data("row-id"));
                $("#modifyInterfaceModel").modal("show");
            }).end().find(".command-delete").on("click", function (e) {
                deleteInterface($(this).data("row-id"));
            });
        });

        $("#addInterfaceBtn").on("click",function(){
            $("#addInterfaceModelContent").load("/interface/toAddInterface");
            $("#addInterfaceModel").modal("show");
        })
    })

    function deleteInterface(interfaceId){
        if(confirm("确定删除吗？")){
            var url = "/interface/deleteInterface?interfaceId="+interfaceId;
            $.get(url,function(data){
                alert(data.reason);
                if(data.ok){
                    $("#data-table-interface").bootgrid("reload");
                }
            })
        }
    }

    function convertValueToJson(type){
        var superDivParam=$("label[class='inline "+type+"'] div[class^='col-sm-'] input[name^='paramName']");
        var array=new Array();
        var paramObject={
            paramName:"",
            paramDesc:""
        }
        $.each(superDivParam, function(i, superParam) {
            var name=$(superParam).val();
            var type=$(superParam).parent().next().children().val();
            if(name != '' && type != ''){
                paramObject=new Object();
                paramObject.paramName=name;
                paramObject.paramDesc=type;
                array.push(paramObject);
            }
        });
        console.log(array);
        return JSON.stringify(array);
    }

    function addInterfaceParam(type){
        var html='';
        html+='<label class="inline '+type+'">';
        html+='<div class="col-sm-4" style="padding-left: 0px;"><input name="paramName" class="form-control" placeholder="参数名称"/></div>';
        html+='<div class="col-sm-5" style="padding-left: 0px;"><input name="paramValue" class="form-control" placeholder="参数描述"/></div>';
        html+='<button type="button" onclick="removeInterfaceParam(this)" class="btn btn-default btn-icon waves-effect waves-circle waves-float">';
        html+='<i class="zmdi zmdi-minus-circle-outline zmdi-hc-fw"></i>';
        html+='</button>';
        html+='</label>';
        $("#"+type).append(html);
    }

    function removeInterfaceParam(param){
        $(param).parent().remove();
    }
    /*]]>*/
</script>